<template>
  <dv-active-ring-chart v-if="pageFlag" :config="cfg" style="width: 100%;height: 100%;"></dv-active-ring-chart>
  <reacquire v-else @click="getData"/>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';

export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      cfg:{
        // 数据
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ],
        // 线宽
        lineWidth: 20,
        // 环半径
        radius: '60%',
        // 环半径（动态）
        activeRadius:'70%',
        // 数字翻牌器样式(就翻牌器之前咋写，现在咋写)
        digitalFlopStyle:{
          fontSize: 25,
          fill: '#fff'
        },
        // 数字翻牌器小数位数
        digitalFlopToFixed:2,
        // 数字翻牌器单位	
        digitalFlopUnit:'万',
        // 显示原始值
        showOriginValue:true,
      }
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    getData(){
      this.pageFlag=true
      this.switper
    },
    switper(){
      this.timer = setInterval(()=>{
        this.getData()
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>

</style>